<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script>
        window.addEventListener("load", function(evt) {

            var output = document.getElementById("output");
            var input = document.getElementById("input");
            var ws;

            var print = function(message) {
                var d = document.createElement("div");
                d.textContent = message;
                output.appendChild(d);
            };

            document.getElementById("open").onclick = function(evt) {
                if (ws) {
                    return false;
                }
                // ws = new WebSocket("{{.}}");
                ws = new WebSocket("ws://127.0.0.1:7010/lingbinbin");
                ws.onopen = function(evt) {
                    print("OPEN");
                }
                ws.onclose = function(evt) {
                    print("CLOSE");
                    ws = null;
                }
                ws.onmessage = function(evt) {
                    print("RESPONSE: " + evt.data);
                }
                ws.onerror = function(evt) {
                    print("ERROR: " + evt.data);
                }
                return false;
            };

            document.getElementById("send").onclick = function(evt) {
                if (!ws) {
                    return false;
                }
                print("SEND: " + input.value);
                let str = input.value
                console.log("send str:"+str)
                ws.send(str);
                return false
            };

            document.getElementById("close").onclick = function(evt) {
                if (!ws) {
                    return false;
                }
                ws.close();
                return false;
            };

        });
    </script>
</head>
<body>
<table>
    <tr><td valign="top" width="50%">
        <p>
        1、单击 "连接",连接上服务器；<br/>
        2、单击 "发送",发送数据到服务器；<br/>
        3、单击 "连接",与服务器断开连接；<br/>
        <p>
            <form>
                <button id="open">连接</button>
                <button id="close">断开</button>
        <p><input id="input" type="text" value="你好!">
            <button id="send">发送</button>
            </form>
    </td><td valign="top" width="50%">
        <div id="output"></div>
    </td></tr></table>
</body>
</html>